<template>
    <el-submenu v-if="menuItem.children && menuItem.children.length" 
        :index="menuItem.path" 
        :popper-append-to-body="false"  >
        <template v-slot:title>
            <FontIcon v-if="menuItem.icon" :icon-name="menuItem.icon"></FontIcon>
            <span class="menu-node-text">{{menuItem.title}}</span>
        </template>
        <template v-if="menuItem.children && menuItem.children.length">
            <div v-if="(mode === 'horizontal' || collapse) && menuItem.children.length >= 18" 
                style="max-height: 80vh; overflow-y: auto; position: fixed; background-color: inherit;">
                <template v-for="(child, index) in menuItem.children">
                    <MenuNode v-if="!child.hidden" :menuItem="child" :mode="mode" :collapse="collapse" :key="index"></MenuNode>
                </template>
            </div>
            <template v-else>
                <template v-for="(child, index) in menuItem.children">
                    <MenuNode v-if="!child.hidden" :menuItem="child" :mode="mode" :collapse="collapse" :key="index"></MenuNode>
                </template>
            </template>
        </template>
    </el-submenu>
    <el-menu-item v-else :route="{path: menuItem.path}" :index="menuItem.path">
        <FontIcon v-if="menuItem.icon" :icon-name="menuItem.icon"></FontIcon>
        <template v-slot:title>
            <span>{{menuItem.title}}</span>
        </template>
    </el-menu-item>
</template>

<script>
export default {
    name: 'MenuNode',
    props: {
        mode: String,
        collapse: Boolean,
        menuItem: {
            type: Object,
            default() {
                return {}
            }
        }
    }
}
</script>
